<template>
    <div class="more dispaly-col-between">
        <el-popover placement="right" trigger="hover" effect="dark">
            <template #reference>
                <div class="item pointer">
                    <img src="/src/assets/image/hart.png">
                </div>
            </template>
            <div class="item-box dispaly-col-center">
                <div class="items pointer" @click="donation">
                    外部捐赠
                    <!-- <img src="/src/assets/image/zjjz.png" alt="直接捐赠"> -->
                </div>
                <div class="items pointer" @click="loginDonation">
                    族人捐赠
                    <!-- <img src="/src/assets/image/dljz.png" alt="登录捐赠"> -->
                </div>
            </div>
        </el-popover>

        <div class="item pointer" @click="centerDialogVisible = true">
            <img src="/src/assets/image/scan.png">
        </div>
        <div class="item">
            <el-backtop :bottom="100">
                <img src="/src/assets/image/top.png">
            </el-backtop>
        </div>
    </div>
    <el-dialog v-model="centerDialogVisible" width="290" center>
        <div class="dispaly-col-center">
            <div class="title">
                二维码
            </div>
            <div class="code">
                <img src="/src/assets/image/2.png">
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useIndexPopStore } from '@/store/modules/indexPop'
const indexPopStore = useIndexPopStore()
import { useRouter } from 'vue-router'
import { ref } from 'vue';

let centerDialogVisible = ref(false)

// 直接捐赠
const router = useRouter()
const donation = () => {
    router.push({
        path: '/donation',
        query: {
            type: 0
        }
    })
}

// 登录捐赠
const loginDonation = () => {
    if (localStorage.getItem('token')) {
        router.push({
            path: '/donation',
            query: {
                type: 1
            }
        })
    } else {
        indexPopStore.isShowPop = true
    }
}


</script>

<style lang="scss" scoped>
:deep(.el-backtop) {
    right: 50px !important;
    bottom: 35px !important;
}

.code {
    margin-top: 24px;
    margin-bottom: 26px;

    img {
        width: 200px;
        height: 200px;
    }
}

.more {
    position: fixed;
    right: 50px;
    bottom: 75px;

    .item {
        img {
            width: 42px;
            height: 42px;
        }
    }


}

.item-box {
    .items:last-child {
        margin-bottom: 0;
    }

    .items {
        width: 122px;
        height: 32px;
        background-color: $primary-color;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        border-radius: 10px;

        img {
            width: 122px;
            height: 32px;
        }
    }
}
</style>